@{
    ViewData["Title"] = "生产退料管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">生产退料管理</h3>
                </div>
                <div class="card-body">
                    <!-- 搜索区域 -->
                    <div class="layui-form layui-form-pane" id="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">退料单编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="returnCode" placeholder="请输入退料单编号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">退料单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="returnName" placeholder="请输入退料单名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">生产工单</label>
                                <div class="layui-input-block">
                                    <div class="layui-input-group">
                                        <input type="text" name="workOrder" placeholder="请输入生产工单" class="layui-input" readonly>
                                        <div class="layui-input-suffix">
                                            <button type="button" class="layui-btn layui-btn-primary" id="selectWorkOrderBtn">
                                                <i class="layui-icon layui-icon-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value="">全部</option>
                                        <option value="草稿">草稿</option>
                                        <option value="已确认">已确认</option>
                                        <option value="已退料">已退料</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>

                    <!-- 工具栏 -->
                    <div class="layui-btn-group">
                        <button class="layui-btn" id="addBtn">
                            <i class="layui-icon layui-icon-add-1"></i> 新增
                        </button>
                    </div>

                    <!-- 表格 -->
                    <table id="returnTable" lay-filter="returnTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="returnActionTpl">
    {{# if(d.status == '草稿') { }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# } }}
    {{# if(d.status == '已确认') { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="execute">执行退料</a>
    {{# } }}
</script>

<!-- 状态列模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.status == '草稿') { }}
        <span class="layui-badge layui-bg-orange">{{d.statusText}}</span>
    {{# } else if(d.status == '已确认') { }}
        <span class="layui-badge layui-bg-blue">{{d.statusText}}</span>
    {{# } else if(d.status == '已退料') { }}
        <span class="layui-badge layui-bg-green">{{d.statusText}}</span>
    {{# } else { }}
        <span class="layui-badge">{{d.statusText}}</span>
    {{# } }}
</script>

<script src="~/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'laydate', 'jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.jquery;

        // 初始化表格
        table.render({
            elem: '#returnTable',
            url: '/ProductionReturn/GetList',
            method: 'POST',
            page: true,
            cols: [[
                {field: 'returnCode', title: '退料单编号', width: 150},
                {field: 'returnName', title: '退料单名称', width: 200},
                {field: 'workOrder', title: '生产工单', width: 150},
                {field: 'warehouseName', title: '接收仓库', width: 120},
                {field: 'returnDate', title: '退料日期', width: 120, 
                 templet: function(d) {
                     return d.returnDate ? new Date(d.returnDate).toLocaleDateString() : '';
                 }
                },
                {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                {field: 'remark', title: '备注', minWidth: 150},
                {title: '操作', width: 280, align: 'center', templet: '#returnActionTpl'}
            ]],
            request: {
                pageName: 'page',
                limitName: 'maxResultCount'
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function(res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.count,
                    data: res.data
                };
            },
            before: function(req) {
                // 将page转换为skipCount
                if (req.page) {
                    req.skipCount = (req.page - 1) * (req.maxResultCount || 10);
                    delete req.page;
                }
                return req;
            }
        });

        // 搜索
        form.on('submit(search)', function(data){
            table.reload('returnTable', {
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        // 新增按钮
        $('#addBtn').on('click', function(){
            layer.open({
                type: 2,
                title: '新增生产退料',
                area: ['1000px', '800px'],
                content: '/ProductionReturn/Form'
            });
        });

        // 选择工单按钮事件
        $('#selectWorkOrderBtn').on('click', function(){
            openWorkOrderSelectDialog();
        });

        // 打开工单选择对话框
        function openWorkOrderSelectDialog() {
            layer.open({
                type: 1,
                title: '选择生产工单',
                area: ['900px', '600px'],
                content: `
                    <div style="padding: 20px;">
                        <div class="layui-form layui-form-pane">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">关键字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="workOrderKeyword" placeholder="工单编号、工单名称、产品编码、产品名称" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" onclick="searchWorkOrders()">搜索</button>
                                </div>
                            </div>
                        </div>
                        <table id="workOrderSelectTable" lay-filter="workOrderSelectTable"></table>
                    </div>
                `,
                success: function(layero, index) {
                    initWorkOrderSelectTable();

                    window.searchWorkOrders = function() {
                        var keyword = $('#workOrderKeyword').val();
                        table.reload('workOrderSelectTable', {
                            where: {keyword: keyword},
                            page: {curr: 1}
                        });
                    };

                    // 监听工单选择
                    table.on('tool(workOrderSelectTable)', function(obj) {
                        var data = obj.data;
                        if (obj.event === 'select') {
                            $('input[name="workOrder"]').val(data.orderCode);
                            layer.close(index);
                            layer.msg('已选择生产工单：' + data.orderCode);
                        }
                    });
                }
            });
        }

        // 初始化生产工单选择表格
        function initWorkOrderSelectTable() {
            table.render({
                elem: '#workOrderSelectTable',
                url: '/ProductionReturn/GetWorkOrdersForSelect',
                method: 'GET',
                page: true,
                cols: [[
                    { field: 'orderCode', title: '工单编号', width: 120 },
                    { field: 'orderName', title: '工单名称', width: 150 },
                    { field: 'productCode', title: '产品编码', width: 120 },
                    { field: 'productName', title: '产品名称', width: 150 },
                    { field: 'specification', title: '规格', width: 120 },
                    { field: 'planQuantity', title: '计划数量', width: 100 },
                    { field: 'status', title: '状态', width: 80 },
                    { title: '操作', width: 100, toolbar: '<div><button class="layui-btn layui-btn-xs" lay-event="select">选择</button></div>' }
                ]],
                request: {
                    pageName: 'page',
                    limitName: 'maxResultCount'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                before: function(req) {
                    if (req.page) {
                        req.skipCount = (req.page - 1) * (req.maxResultCount || 10);
                        delete req.page;
                    }
                    return req;
                }
            });
        }

        // 表格行工具事件
        table.on('tool(returnTable)', function(obj){
            var data = obj.data;

            if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '编辑生产退料',
                    area: ['1000px', '800px'],
                    content: '/ProductionReturn/Form?id=' + data.id,
                    btn: ['确认', '取消'],
                    yes: function(index, layero) {
                        // 获取iframe窗口
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        // 调用iframe中的保存方法并确认状态
                        if (iframeWin && iframeWin.saveAndConfirm) {
                            iframeWin.saveAndConfirm(function() {
                                layer.close(index);
                                table.reload('returnTable');
                                layer.msg('退料单已确认');
                            });
                        }
                    },
                    btn2: function(index) {
                        layer.close(index);
                    }
                });
            } else if(obj.event === 'execute'){
                layer.confirm('确定执行退料操作吗？执行后将更新库存数据。', function(index){
                    $.post('/ProductionReturn/ExecuteReturn', {returnId: data.id}, function(res){
                        if(res.success){
                            layer.msg('退料操作执行成功');
                            table.reload('returnTable');
                        } else {
                            layer.msg('执行失败：' + res.message);
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>
</html> 